<template>
    <div class="eCBAnalysis1">
        <div class="leftContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
            <navigation-bar customTitle="部门">
                <div class="searchContent">
                    <el-input
                        clearable
                        v-model="departName"
                        placeholder="请输入部门名称"
                        size="mini"
                        style="width: 150px; margin-right: 10px"
                    ></el-input>
                    <custom-button type="search" style="margin-right: 10px" @searchClick="searchClick"></custom-button>
                </div>
            </navigation-bar>
            <table-index
                :dataSource="dataSource"
                :tableColumns="tableColumns"
                :btnList="btnList"
                :pageSize="pageSize"
                :pageCount="pageCount"
                :pageNo="pageNo"
                @pageChange="pageChange"
                @handleSelectionChange="handleSelectionChange"
            ></table-index>
        </div>
        <div class="rightContent" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
            <navigation-bar customTitle="部门岗位人员">
                <div class="searchContent">
                    <el-input
                        v-model="userName"
                        placeholder="请输入用户名称"
                        size="mini"
                        style="width: 150px; margin-right: 10px"
                    ></el-input>
                    <custom-button type="search" style="margin-right: 10px" @searchClick="searchClick"></custom-button>
                    <custom-button type="reset" style="margin-right: 10px" @resetClick="resetClick"></custom-button>
                    <custom-button type="add" title="添加人员" style="margin-right: 10px" @addClick="addClick"></custom-button>
                    <custom-button
                        type="custom"
                        title="设置岗位"
                        icon="el-icon-edit"
                        style="margin-right: 10px"
                        @customClick="customClick('1')"
                    ></custom-button>
                    <custom-button
                        type="custom"
                        title="移除人员"
                        icon="el-icon-edit"
                        style="margin-right: 10px"
                        @customClick="customClick('0')"
                    ></custom-button>
                </div>
            </navigation-bar>
            <table-index
                :dataSource="dataSourceUser"
                :tableColumns="tableColumnsUser"
                :btnList="btnListUser"
                :pageSize="pageSizeUser"
                :pageCount="pageCountUser"
                :pageNo="pageNoUser"
                @pageChange="pageChangeUser"
                selection
                @handleSelectionChange="handleSelectionChangeUser"
            ></table-index>
        </div>
        <arrowLeft @arrowChange="arrowChange"></arrowLeft>

        <div v-if="dialogShowUser">
            <custom-dialog title="选择用户" size="large" @dialogClose="dialogShowUser = false">
                <selectUser roleId="1" @close="dialogShowUser = false"></selectUser>
            </custom-dialog>
        </div>

        <div v-if="dialogShowGw">
            <custom-dialog title="设置岗位" size="large" @dialogClose="dialogShowGw = false">
                <setGw roleId="1" @close="dialogShowGw = false"></setGw>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import arrowLeft from '@/components/customComponents/arrowLeftOrg'
import tableIndex from '@/components/customComponents/customeTable/tableIndex'
import navigationBar from '@/components/customComponents/managementCenter/navigationBarCustom'
import {DepartOrgList, userList} from '@/mockData/systemManage.js'
import customDialog from '@/components/customComponents/customDialog'
import customButton from '@/components/customComponents/customForm/customButton'
import {Utility} from '@/libs/utility'
import {PopupCommon} from '@/libs/popupCommon'
import selectUser from './components/selectUser'
import setGw from './components/setGw'
export default {
    name: 'eCBAnalysis',
    components: {arrowLeft, tableIndex, navigationBar, customButton, selectUser, customDialog, setGw},
    data() {
        return {
            dialogShowGw: false,
            dialogShowUser: false,
            userName: '',
            departName: '',
            dir: 'left',
            // table 相关参数  begin
            dataSource: DepartOrgList,
            checkedKey: [],
            tableColumns: [
                {
                    prop: 'name',
                    label: '部门名称'
                }
            ],
            btnList: [],
            pageSize: 20,
            pageCount: 1,
            pageNo: 1,
            // table 相关参数  end

            // table 相关参数  begin
            dataSourceUser: userList,
            tableColumnsUser: [
                {
                    prop: 'name',
                    label: '姓名'
                },
                {
                    prop: 'loginName',
                    label: '登录名'
                },
                {
                    prop: 'gw',
                    label: '岗位'
                },
                {
                    prop: 'sex',
                    label: '性别',
                    dictName: 'sex'
                },
                {
                    prop: 'tel',
                    label: '联系电话'
                    // dictName: "departType"
                },
                {
                    prop: 'email',
                    label: '邮箱'
                    // dictName: "departXz"
                },
                {
                    prop: 'address',
                    label: '地址'
                },

                {
                    prop: 'lastLoginTime',
                    label: '最后登录时间'
                    // dictName: "trueOrFalse"
                },

                {
                    prop: 'roleName',
                    label: '所属角色'
                    // dictName: "trueOrFalse"
                }
            ],
            btnListUser: [],
            pageSizeUser: 20,
            pageCountUser: 2,
            pageNoUser: 1,
            // table 相关参数  end

            data: [],
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            selectUserList: []
        }
    },
    computed: {},
    created() {
        this.getAllMenu()
    },
    mounted() {},
    methods: {
        addClick() {
            this.dialogShowUser = true
        },
        getAllMenu() {
            const menuList = window.sessionStorage.getItem('menuList')
            const jsonMenu = JSON.parse(menuList)
            // 拉平
            var listData = Utility.arrayFlat(jsonMenu, (t) => t.children)
            // 去重
            var newList = Utility.removeObjByAttr(listData)
            // 折叠
            const treeData = Utility.arrayCascade(newList, (c, p) => c.parentId == p.id, 'children')
            console.log(treeData, 'treeData....')
            this.data = treeData
        },
        customClick(type) {
            if (type == '1') {
                this.dialogShowGw = true
                return
            }
            if (type == '0') {
                if (this.selectUserList.length < 1) {
                    PopupCommon.notify('info', '请选择至少一个用户')
                    return
                }
                PopupCommon.confirm('此操作将移除用户, 是否继续?')
                    .then(() => {
                        // const data = {
                        //     index: i,
                        //     data: d[i]
                        // }
                        // this.$emit("deleteRow", data)
                        PopupCommon.notify('success', '移除成功')
                    })
                    .catch(() => {
                        // 这里尽量写下，否则会报警告异常。
                        console.log('已取消删除')
                    })
            }
        },
        resetClick() {
            this.userName = ''
        },
        searchClick() {
            this.pageNo = 1
            // this.initPage()
        },
        // 点击行勾选数据
        handleSelectionChange(row) {
            // this.$emit("handleClickTableRow", row)
            console.log(row, 'row............................')
            // this.$refs.table.toggleRowSelection(row)
        },
        handleSelectionChangeUser(row) {
            this.selectUserList = row
        },
        // 分页点击事件
        pageChange(p) {
            this.pageNo = p
            // this.initPage()
        },
        pageChangeUser(p) {
            this.pageNo = p
            // this.initPage()
        },
        arrowChange(e) {
            this.dir = e
        }
    }
}
</script>

<style lang="scss" scoped>
.eCBAnalysis1 {
    background-color: #fff;
    height: calc(100vh - 100px);
    /* margin: 10px 0; */
    width: 100%;
    /* padding: 10px; */
    text-align: left;
    display: flex;
    position: relative;
    .leftArrow {
        width: 400px !important;
    }
    .rightArrow {
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }
    .leftContent {
        transition: transform 0.3s;
        width: 400px;
        text-align: left;
        height: 100%;
        text-align: center;
        border-right: 1px solid #eee;
        padding-right: 10px;
        overflow: hidden;
        .mcCommonPager {
            margin-top: 5px !important;
        }
    }
    .leftTable {
        max-width: calc(100% - 400px);
    }
    .rightTable {
        max-width: calc(100% - 0px);
    }
    .rightContent {
        flex: 1;
        text-align: left;
        height: 100%;
        padding: 0 10px;
        overflow: hidden;
        .mcCommonPager {
            margin-top: 5px !important;
        }
        .elTree {
            height: calc(100vh - 160px);
            overflow-y: auto;
        }
        .btn {
            margin: 15px 0 10px 10px;
        }
    }
}
</style>
